<template>
  <div>
    <a-card hoverable style="width: 400px">
      <div slot="header" class="clearfix">
<!--        <span>{{admin.email}}</span>-->
      </div>
      <div>
        <div style="display: flex;justify-content: center">
          <el-upload
              action="/admin/avatar"
              :headers="headers"
              :data="admin"
              :show-file-list="false"
              :on-success="onSuccess">
            <img title="点击修改用户头像"
                 :src="admin.avatar"
                 style="width: 100px;height: 100px;border-radius: 50px"
                 alt="">
          </el-upload>
        </div>
        <div>邮箱地址：<a-tag>{{admin.email}}</a-tag></div>
        <div>创建时间：<a-tag>{{admin.createTime}}</a-tag></div>
        <div>角色名称：<a-tag type="success" v-for="(r, index) in admin.roles" :key="index">{{r.name}}</a-tag></div>
        <div style="display: flex;justify-content: space-around;margin-top: 10px;">
          <a-button type="primary" @click="detailForm.username = admin.username; detailForm.email = admin.email; detailVisible = true">修改信息</a-button>
          <a-button type="danger" @click="passwordVisible = true">修改密码</a-button>
        </div>
      </div>
    </a-card>

    <a-modal
        title="密码修改"
        :visible="passwordVisible"
        :confirmLoading="passwordLoading"
        cancelText="返回"
        okText="确认"
        @ok="passwordSubmit"
        @cancel="passwordCancel"
    >
      <a-form-model ref="passwordForm" :model="passwordForm" :rules="passwordRules">
        <a-form-model-item label="旧密码" prop="oldPass">
          <a-input-password placeholder="请输入旧密码" v-model="passwordForm.oldPass" />
        </a-form-model-item>
        <a-form-model-item label="新密码" prop="newPass">
          <a-input-password placeholder="请输入新密码" v-model="passwordForm.newPass" />
        </a-form-model-item>
        <a-form-model-item label="确认新密码" prop="checkPass">
          <a-input-password placeholder="请输入新密码" v-model="passwordForm.checkPass" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
        title="个人信息修改"
        :visible="detailVisible"
        :confirmLoading="detailLoading"
        cancelText="返回"
        okText="确认"
        @ok="detailSubmit"
        @cancel="detailCancel"
    >
      <a-form-model ref="detailForm" :model="detailForm" :rules="detailRules">
        <a-form-model-item label="绑定邮箱" prop="email">
          <a-input placeholder="请输入绑定邮箱" v-model="detailForm.email"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "AdminInfo",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordForm.checkPass !== '') {
          this.$refs.passwordForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      admin: null,
      passwordVisible: false,
      passwordLoading: false,
      passwordForm: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      passwordRules: {
        oldPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        newPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      detailVisible: false,
      detailLoading: false,
      detailForm: {
        email: ''
      },
      detailRules: {
        email: [{required: true, message: '请输入绑定邮箱', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.initAdmin()
  },
  methods: {
    initAdmin() {
      this.getRequest('/admin/info').then(resp => {
        if (resp) {
          this.admin = resp
          this.detailForm = Object.assign({}, this.admin)
          window.sessionStorage.setItem('user', JSON.stringify(resp))
          this.$store.commit('INIT_ADMIN', resp)
        }
      })
    },
    onSuccess() {
      this.initAdmin()
    },
    passwordSubmit() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.passwordLoading = true
          this.passwordForm.adminId = this.admin.id
          this.putRequest('/admin/pass', this.passwordForm).then(resp => {
            if (resp) {
              this.passwordLoading = false
              this.postRequest('/logout')
              window.sessionStorage.removeItem('user')
              window.sessionStorage.removeItem('tokenStr')
              this.$store.commit('INIT_ROUTES', [])
              this.$router.replace('/')
            } else {
              this.passwordLoading = false
              this.$message.error(resp.message)
            }
          })
        }
      })
    },
    passwordCancel() {
      this.$refs.passwordForm.resetFields()
      this.passwordVisible = false
      this.passwordForm = {
        oldPass: '',
        newPass: '',
        checkPass: ''
      }
    },
    detailSubmit() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          this.detailLoading = true
          if (this.detailForm.email === this.admin.email) {
            this.detailLoading = false
            this.detailVisible = false
            this.$message.success('更新成功')
            return
          }
          this.detailForm.id = this.admin.id
          this.putRequest('/api/admin/', this.detailForm).then(resp => {
            if (resp) {
              this.detailLoading = false
              this.detailVisible = false
              this.initAdmin()
            } else {
              this.detailLoading = false
            }
          })
        }
      })
    },
    detailCancel() {
      this.$refs.detailForm.resetFields()
      this.detailVisible = false
      this.detailForm = {
        email: ''
      }
    }
  }
}
</script>

<style scoped>

</style>